<template>
  <div>
    <van-nav-bar
      title="商品"
      left-arrow
      @click-left="onClickLeft"
    />
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="(v, index) in arr" :key="index">
        <img :src="v" class="img" />
      </el-carousel-item>
    </el-carousel>
    <div v-for="(v,item) in money" :key="item">
      <div class="money">￥{{v}}</div>  <div class="promoney">{{promoney[item]}}</div>
      <div class="text">{{text[item]}}</div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="star" text="已收藏" />
      <van-goods-action-icon icon="cart-o" text="购物车" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <Hotsale></Hotsale>
  </div>
</template>

<script>
import Hotsale from '../single/Hotsale.vue'
import { NavBar } from "vant";
Vue.use(NavBar);
import Vue from "vue";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

export default {
  components:{
    Hotsale
  },
  data() {
    return {
      arr: [],
      money: [],
      promoney: [],
      text: [],
    };
    },
    methods:{
      onClickLeft(){
      this.$router.push({path:'/total'}).catch(err=>{})
      }
    },
  mounted() {
    this.str = this.$route.query.indexs;
    this.$http({
      url: " http://localhost:3000/banner",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        element.data.data1.forEach((item) => {
          if (this.str == item.id - 1) {
            this.arr.push(item.img1);
            this.arr.push(item.img2);
            this.arr.push(item.img3);
            this.arr.push(item.img4);
            this.arr.push(item.img5);
            this.money.push(item.money);
            this.promoney.push(item.befor);
            this.text.push(item.bantext);
          }
        });
      });
    });
  },
};
</script>

<style scoped>
.money {
  width: 100px;
  height: 40px;
  font-size: 22px;
  color: red;
  line-height: 40px;
}
.promoney{
  height: 30px;
  line-height: 30px;
  text-decoration:line-through;
}
.text {
  width: 340px;
  height: 100px;
  margin-left: 15px;
  margin-top: 15px;
  font-size: 18px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
img {
  width: 100%;
  height: 100%;
}
</style>